<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#/home">首页</a>
    <a href="#/about">关于</a>
    <div id="app"></div>
</body>
<script>
     const routes = [
        {
            path:'/home',
            component:()=>{
                return "<h1>首页<h1>"
            }
        },
        {
            path:'/about',
            component:()=>{
                return "<h1>关于<h1>"
            }
        }
    ] 
    window.addEventListener('DOMContentLoaded',()=>{        //当 HTML 文档完全加载和解析完毕后触发
        routerView(location.hash)
    })
    window.addEventListener('hashchange',()=>{
         routerView()
    })
    function routerView(){
        const index = routes.findIndex((item)=>{
            return '#'+item.path == location.hash
        })
        
        app.innerHTML = routes[index].component()
    }
</script>
</html>